<template>
  <!-- 返回组件 -->
  <navTabrBack
    :backEvent="backEvent"
    :navbackStyle="['padding-right: 20rpx']"
    :title="'添加专利到专利集'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <!-- 搜索 -->
    <view class="serch">
      <view class="indexSerch">
        <view class="iconSerch iconfont icon-sousuo"></view>

        <input
          class="indexInput"
          maxlength="200"
          placeholder-style="color: #999999;"
          placeholder="输入专利集/专利名称"
          confirm-type="search"
          @confirm="doSearch(e)"
          @input="onValue"
        />
      </view>
      <!-- <view class="no">取消</view> -->
    </view>
    <!-- 搜索历史 -->
    <!-- <view v-show="flage">
      <view class="serchHistory">
        <view>搜索历史</view>
        <view class="iconfont icon-huishouzhan_huaban"></view>
      </view>
      <view class="historyItem">一种用于农业改良土壤的农业设备</view>
      <view class="historyItem">一种用于备</view>
      <view class="historyItem"
        >一种用于农业农业设备一种用于农业农业设备一种用于农业农业设备一种用于农业农业设备
      </view>
    </view> -->
    <!-- 搜索专利列表 -->
    <view>
      <view class="serchItem" v-for="(item, index) in dataList" :key="index">
        <view @click="toPatentDetile(item.ID)">
          <view class="patentTitle">{{ item.name }}</view>
          <view class="patentClassify">{{ item.type }}</view>
        </view>
        <checkbox
          :checked="disabledList[index]"
          class="checkCream"
          @click="isCheckt(index, item.ID)"
        />
      </view>
    </view>
  </view>
  <button class="addPatent" @click="isOk">添加专利到专利集</button>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="添加成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 确认删除 -->
  <uni-popup ref="alertDialog" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认添加</view>
        <view class="loginInfo1">是否确定添加当前专利集下面的专利？</view>
        <view class="affirm1">
          <view class="" @click="toAddPatentCream(false)">取消</view>
          <view class="solid1" @click="toAddPatentCream(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message" type="message">
    <uni-popup-message
      type="error"
      message="请勾选需要添加的信息！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { inject, reactive, toRefs, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
let data = reactive({
  userInfo: {},
  dataList: [],
  disabledList: [],
  page: 1,
  dic: [],
  id: "",
  value: "",
  addData: {
    groupId: "",
    baseNum: [],
  },
});
let message = ref();
let success = ref();
let alertDialog = ref();
let input = ref();
let { dataList, disabledList, value } = toRefs(data);
onLoad((item) => {
  data.dataList = []
  data.page = 1
  data.id = item.id;
  data.addData.groupId = item.id * 1;
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      data.userInfo = res.data;
      uni.request({
        url: $url + `/zlBaseType/getZlBaseTypeList `,
        method: "GET",
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.dic = res.data.data.list;
        },
      });
      updataList();
    },
  });
});
const isOk = () => {
  alertDialog.value.open();
};
const toAddPatentCream = (bool) => {
  if (bool) {
    data.addData.baseNum = [];
    data.disabledList.map((item, index) => {
      if (item) {
        data.addData.baseNum.push(data.dataList[index].num);
      }
    });
    if (data.addData.baseNum.length > 0) {
      uni.request({
        url: $url + `/zlCollect/createZlCollect`,
        method: "POST",
        timeout: 6000,
        data: data.addData,
        header: {
          "x-token": data.userInfo.token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          alertDialog.value.close();
          success.value.open();
        },
      });
    } else {
      message.value.open();
    alertDialog.value.close();
    }
  } else {
    alertDialog.value.close();
  }
};
const isCheckt = (index, id) => {
  data.disabledList[index] = !data.disabledList[index];
};
const backEvent = () => {
    uni.navigateBack({
        fail: () => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
        success: () => {
          let page = getCurrentPages().pop();
          if (page) {
            page.onLoad(page.options); //执行上个页面的方法
          }
        },
      });
};
const toPatentDetile = (id) => {
  uni.navigateTo({
    url: `/pages/patentDetails/index?id=${id}`,
  });
};
onPullDownRefresh(() => {
  data.disabledList= []
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
const updataList = (val) => {
  uni.request({
    url:
      $url +
      `/zlBaseProd/getZlBaseProdList?auditStatus=1&groupId=${data.id}&isCollected=1&page=${data.page}&pageSize=10${
        val?.trim().length > 0 ? "&name=" + val : ""
      }`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data?.data?.list.map((item) => {
        data.dic.map((res) => {
          if (res.ID == item.type) {
            item.type = res.name;
          }
        });
        data.dataList.push(item);
        data.disabledList.push(false)
      });
    },
  });
};

const onValue = (e) => {
  data.value = e.detail.value;
  if (e.detail.value.trim().length < 1) {
    data.dataList = [];
    updataList();
  }
};
// 搜索事件
const doSearch = () => {
  data.page = 1;
  data.dataList = [];
  updataList(data.value.trim());
};
</script>

<style scoped>
/* 搜索历史 */
.serchHistory {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 43rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.serchHistory .iconfont {
  color: #999999;
  font-size: 32rpx;
}
.historyItem {
  display: inline-flex;
  height: 54rpx;
  line-height: 54rpx;
  background: #eeeeee;
  border-radius: 27rpx;
  margin-bottom: 36rpx;
  padding: 0 27rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no {
  margin-top: 23rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
.serch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 23rpx;
}
.content {
  padding: 0 28rpx;
  padding-bottom: 55rpx;
}
/* 搜索栏 */
.indexSerch {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 23rpx;
  height: 72rpx;
  background: #ffffff;
  border-radius: 36rpx;
  padding-left: 76rpx;
  background: #f5f5f5;
  margin-right: 27rpx;
}
.indexInput {
  width: 85%;
  height: 36rpx;
  font-size: 25rpx;
}
.iconSerch {
  position: absolute;
  left: 18rpx;
  top: 18rpx;
  font-size: 35rpx;
  color: #999999;
}
/* 搜索列表 */

/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32rpx;
}
.checkCream {
  width: 40rpx;
  margin-right: 18rpx;
}
.serchItemIndex {
  margin-right: 20rpx;
  width: 50rpx;
  color: #999;
}
.patentTitle {
  margin-top: 7rpx;
  width: 400rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.addPatent {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 67rpx;
  width: 380rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 2rpx solid #1677ff;
  font-size: 25rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1677ff;
  margin-bottom: 30rpx;
}
.dataList1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle1 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.affirm1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm1 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid1 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo1 {
  margin: 30rpx;
}
</style>
